<template>
  <view class="page">
    <!--		切换科目-->
    <view class="toggle-subject-btn">
      <view class="btn">
        <image class="icon" :src="switchIcon"></image>
        <text>切换</text>
      </view>
    </view>

    <view class="block">
      <view class="header">
        <view class="title">
          <view class="point"></view>
          <view class="text">历年真题</view>
        </view>
      </view>
      <view class="content">
        <!--				题目分类列表-->
        <view class="topic-class-list">
          <view class="item" v-for="item in topicClassList" :key="item.classId" @click="topicClassListItemClick(item)">
            <image class="icon" :src="getShowImage(item.classIco)"></image>
            <view class="right">
              <view class="topic-class-name">{{ item.className }}</view>
              <view class="note">{{ item.classNotes }}</view>
              <view class="btn">前往刷题</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!--		只有考研专栏才存在-->
    <view class="block" style="margin-top: 60rpx" v-if="subjectCode === 'Postgraduate'">
      <view class="header">
        <view class="title">
          <view class="point"></view>
          <view class="text">带背带练</view>
        </view>
        <text class="view-more-btn">查看更多 &gt;</text>
      </view>
      <view class="content">
        <!--				带背分类列表-->
        <view class="daiBei-category-list">
          <view
            class="item"
            style=""
            v-for="item in daiBeiCategoryList"
            :key="item.title"
            :style="{ background: item.background }"
            @click="currentSelectDaiBeiCategory = item"
          >
            <view class="title">{{ item.title }}</view>
            <view class="sub-title">{{ item.subTitle }}</view>
          </view>
        </view>
        <view class="daiBei-category-details" v-if="currentSelectDaiBeiCategory">
          <view class="text-icon" :style="{ background: currentSelectDaiBeiCategory.background }">
            <text>{{ currentSelectDaiBeiCategory.iconText }}</text>
          </view>
          <view class="right">
            <view class="title">{{ currentSelectDaiBeiCategory.title }}</view>
            <view class="desc">
              <text>共</text>
              <text style="color: rgba(121, 120, 120, 1)">{{ currentSelectDaiBeiCategory.totalDays }}</text>
              <text>天</text>
              <text style="margin: 0 10rpx">|</text>
              <text>{{ currentSelectDaiBeiCategory.learningPeople }}</text>
              <text>人学习中</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="block" style="margin-top: 60rpx">
      <view class="header">
        <view class="title">
          <view class="point"></view>
          <view class="text">更多学习服务</view>
        </view>
      </view>
      <view class="content">
        <view class="learning-service-list">
          <view class="row" v-for="row in learningServiceList[subjectCode]" :key="row">
            <view class="item" v-for="item in row" :key="item" @click="learningServiceItemClick(item)">
              <image class="icon" mode="widthFix" :src="getShowNginxPicUrl(item.icon)"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "@/utils/request"
import switchIcon from "./assets/switch.png"
import { getShowImage, handleUrlParams } from "@/utils"
import { getShowNginxPicUrl } from "@/utils/settings"

export default {
  data() {
    return {
      subjectCode: "",
      subjectName: "",
      examIds: [], // 考试ID列表
      classIds: [], // 刷题分类ID列表
      topicClassList: [], // 刷题分类列表
      switchIcon,
      // 带背带练分类列表
      daiBeiCategoryList: [
        {
          background: "linear-gradient(180deg, rgba(255, 204, 85, 1) 0%, rgba(236, 188, 62, 1) 100%)",
          title: "词汇带背",
          subTitle: "考研英语",
          iconText: "词汇\n带背",
          totalDays: 7,
          learningPeople: 1200,
        },
        {
          background: "linear-gradient(180deg, rgba(52, 203, 146, 1) 0%, rgba(29, 167, 115, 1) 100%)",
          title: "长难句带练",
          subTitle: "考研英语",
          iconText: "长难句\n带练",
          totalDays: 7,
          learningPeople: 1200,
        },
        {
          background: "linear-gradient(180deg, rgba(85, 201, 255, 1) 0%, rgba(48, 143, 199, 1) 100%)",
          title: "阅读带练",
          subTitle: "考研英语",
          iconText: "阅读\n带练",
          totalDays: 7,
          learningPeople: 1200,
        },
      ],
      currentSelectDaiBeiCategory: null,
      //学习服务
      learningServiceList: {
        //四六级
        Cet: [
          [
            // 备考资料
            {
              icon: "8a8c425b69d3656ea7997f983cb7495.png",
            },
            // 作文批改
            {
              icon: "6987918595bb394c2cc537c16c06e37.png",
            },
          ],
        ],
        //考研
        Postgraduate: [
          [
            // 帮你择校
            {
              icon: "36cee1303b4a78e7c9a694cd0f35cea.png",
              redirectUrl: "/markingCampaign/pages/kaoYanSection/list/index",
              jumpType: "jumpPage",
            },
            //备考资料
            {
              icon: "8a8c425b69d3656ea7997f983cb7495.png",
            },
          ],
          [
            //摸底练习
            {
              icon: "9b23cbed962a56b47b283a9746ccb47.png",
            },
            //作文批改
            {
              icon: "6987918595bb394c2cc537c16c06e37.png",
            },
          ],
        ],
      },
    }
  },
  onLoad(query) {
    this.subjectCode = decodeURIComponent(query.subjectCode)
    this.subjectName = decodeURIComponent(query.subjectName)
    this.examIds = JSON.parse(decodeURIComponent(query.examIds))
    this.classIds = JSON.parse(decodeURIComponent(query.classIds))
    // 动态设置页面标题
    uni.setNavigationBarTitle({
      title: this.subjectName,
    })
    uni.showLoading({ title: "加载中" })
    Promise.all([this.getTopicClassList()]).finally(() => {
      uni.hideLoading()
    })
    // 默认选中第一个带背带练分类
    this.currentSelectDaiBeiCategory = this.daiBeiCategoryList[0]
  },
  methods: {
    getShowNginxPicUrl,
    getShowImage,
    // 查询刷题分类列表
    async getTopicClassList() {
      this.topicClassList = await request({
        url: "homeFunction/listTopicClassByIds",
        data: {
          classIds: this.classIds,
        },
        errorHandle: true,
      })
    },
    // 点击刷题分类列表项
    topicClassListItemClick(item) {
      uni.navigateTo({
        url: handleUrlParams("/practice/pages/chooseStructure/index", {
          classId: item.classId,
          className: item.className,
        }),
      })
    },
		// 学习服务点击事件
		learningServiceItemClick(item) {
			if (item.jumpType === "jumpPage") {
				uni.navigateTo({
					url: item.redirectUrl,
				})
			}
		}
  },
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(180deg, #e5fff8 0%, #eff1f0 100%);
  padding-bottom: 10vh;
  > .toggle-subject-btn {
    padding: {
      left: 30rpx;
      right: 30rpx;
      top: 0;
      bottom: 30rpx;
    }
    display: flex;
    justify-content: flex-end;
    > .btn {
      display: flex;
      align-items: center;
      padding: 8rpx 24rpx;
      font-size: 28rpx;
      color: #888888;
      border: 2rpx solid #888888;
      border-radius: 31rpx;
      > .icon {
        width: 30rpx;
        height: 30rpx;
      }
      > text {
        margin-left: 10rpx;
      }
    }
  }
  > .block {
    padding: {
      left: 30rpx;
      right: 30rpx;
    }
    > .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      > .title {
        display: flex;
        align-items: center;
        > .point {
          height: 30rpx;
          width: 8rpx;
          background: #30c0b8;
          border-radius: 4rpx;
        }
        > .text {
          font-weight: bold;
          font-size: 32rpx;
          margin-left: 14rpx;
        }
      }
      > .view-more-btn {
        font-size: 30rpx;
        color: #888888;
      }
    }
    > .content {
      margin-top: 30rpx;
      > .topic-class-list {
        background: white;
        border-radius: 20rpx;
        padding: 0 30rpx;
        > .item {
          display: flex;
          align-items: center;
          padding: 30rpx 0;
          &:not(:last-child) {
            border-bottom: 2rpx solid #f0f0f0;
          }
          > .icon {
            width: 117rpx;
            height: 153rpx;
            border-radius: 20rpx;
          }
          > .right {
            width: 0;
            flex: 1;
            margin-left: 30rpx;
            > .topic-class-name {
              font-size: 32rpx;
            }
            > .note {
              margin-top: 10rpx;
              font-size: 28rpx;
              color: var(--text-color-light);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 100%;
            }
            > .btn {
              margin-top: 10rpx;
              padding: 0 20rpx;
              height: 60rpx;
              border-radius: 30rpx;
              font-size: 28rpx;
              display: flex;
              align-items: center;
              width: max-content;
              color: var(--text-color-theme);
              border: 2rpx solid var(--text-color-theme);
            }
          }
        }
      }
      > .daiBei-category-list {
        margin-top: 30rpx;
        width: 100%;
        overflow-x: auto;
        display: flex;
        > .item {
          padding: 20rpx;
          border-radius: 20rpx;
          color: white;
          margin-right: 30rpx;
          > .title {
            font-size: 32rpx;
          }
          > .sub-title {
            font-size: 28rpx;
            margin-top: 4rpx;
          }
        }
      }
      > .daiBei-category-details {
        margin-top: 30rpx;
        background: white;
        border-radius: 30rpx;
        padding: 30rpx;
        display: flex;
        align-items: center;
        > .text-icon {
          padding: 18rpx 24rpx;
          border-radius: 10rpx;
          text-align: center;
          > text {
            font-size: 32rpx;
            color: white;
          }
        }
        > .right {
          margin-left: 30rpx;
          > .title {
            font-size: 32rpx;
          }
          > .desc {
            margin-top: 20rpx;
            color: #797878;
            font-size: 28rpx;
          }
        }
      }
      > .learning-service-list {
        > .row {
          margin-top: 30rpx;
          display: flex;
          align-items: flex-end;
          > .item {
            width: 0;
            flex: 1;
            &:not(:last-child) {
              margin-right: 30rpx;
            }
            > .icon {
              width: 100%;
              max-height: 300rpx;
            }
          }
        }
      }
    }
  }
}
</style>
